import { PageContainer } from "@ant-design/pro-components";
import { useModel } from "@umijs/max";
import { Card, theme } from "antd";
import React from "react";

/**
 * 每个单独的卡片，为了复用样式抽成了组件
 * @param param0
 * @returns
 */
const InfoCard: React.FC<{
  title: string;
  index: number;
  desc: string;
  href: string;
}> = ({ title, href, index, desc }) => {
  const { useToken } = theme;

  const { token } = useToken();

  return (
    <div
      style={{
        backgroundColor: token.colorBgContainer,
        boxShadow: token.boxShadow,
        borderRadius: "8px",
        fontSize: "14px",
        color: token.colorTextSecondary,
        lineHeight: "22px",
        padding: "16px 19px",
        minWidth: "220px",
        flex: 1
      }}
    >
      <div
        style={{
          display: "flex",
          gap: "4px",
          alignItems: "center"
        }}
      >
        <div
          style={{
            width: 48,
            height: 48,
            lineHeight: "22px",
            backgroundSize: "100%",
            textAlign: "center",
            padding: "8px 16px 16px 12px",
            color: "#FFF",
            fontWeight: "bold",
            backgroundImage:
              "url('https://gw.alipayobjects.com/zos/bmw-prod/daaf8d50-8e6d-4251-905d-676a24ddfa12.svg')"
          }}
        >
          {index}
        </div>
        <div
          style={{
            fontSize: "16px",
            color: token.colorText,
            paddingBottom: 8
          }}
        >
          {title}
        </div>
      </div>
      <div
        style={{
          fontSize: "14px",
          color: token.colorTextSecondary,
          textAlign: "justify",
          lineHeight: "22px",
          marginBottom: 8
        }}
      >
        {desc}
      </div>
      <a href={href} target="_blank" rel="noreferrer">
        了解更多 {">"}
      </a>
    </div>
  );
};

const Welcome: React.FC = () => {
  const { token } = theme.useToken();
  const { initialState } = useModel("@@initialState");
  return (
    <PageContainer>
      <Card
        style={{
          borderRadius: 8
        }}
        bodyStyle={{
          backgroundImage:
            initialState?.settings?.navTheme === "realDark"
              ? "background-image: linear-gradient(75deg, #1A1B1F 0%, #191C1F 100%)"
              : "background-image: linear-gradient(75deg, #FBFDFF 0%, #F5F7FF 100%)"
        }}
      >
        <div
          style={{
            backgroundPosition: "100% -30%",
            backgroundRepeat: "no-repeat",
            backgroundSize: "274px auto",
            backgroundImage:
              "url('https://gw.alipayobjects.com/mdn/rms_a9745b/afts/img/A*BuFmQqsB2iAAAAAAAAAAAAAAARQnAQ')"
          }}
        >
          <div
            style={{
              fontSize: "20px",
              color: token.colorTextHeading
            }}
          >
            欢迎使用 Ant Design Pro
          </div>
          <p
            style={{
              fontSize: "14px",
              color: token.colorTextSecondary,
              lineHeight: "22px",
              marginTop: 16,
              marginBottom: 32,
              width: "65%"
            }}
          >
            Ant Design Pro 是一个整合了 umi，Ant Design 和 ProComponents
            的脚手架方案。致力于在设计规范和基础组件的基础上，继续向上构建，提炼出典型模板/业务组件/配套设计资源，进一步提升企业级中后台产品设计研发过程中的『用户』和『设计者』的体验。
          </p>
          <div
            style={{
              display: "flex",
              flexWrap: "wrap",
              gap: 16
            }}
          >
            <InfoCard
              index={1}
              href="https://umijs.org/docs/introduce/introduce"
              title="了解 umi"
              desc="umi 是一个可扩展的企业级前端应用框架,umi 以路由为基础的，同时支持配置式路由和约定式路由，保证路由的功能完备，并以此进行功能扩展。"
            />
            <InfoCard
              index={2}
              title="了解 ant design"
              href="https://ant.design"
              desc="antd 是基于 Ant Design 设计体系的 React UI 组件库，主要用于研发企业级中后台产品。"
            />
            <InfoCard
              index={3}
              title="了解 Pro Components"
              href="https://procomponents.ant.design"
              desc="ProComponents 是一个基于 Ant Design 做了更高抽象的模板组件，以 一个组件就是一个页面为开发理念，为中后台开发带来更好的体验。"
            />
          </div>
        </div>
      </Card>
    </PageContainer>
  );
};

export default Welcome;
